<template>
	<Layout class="ty-layout"> 
		<Header class="ty-layout-header-bar">
			<Row>
				<i-col :xs="4" :sm="4" :md="4" :lg="4" class="ty-layout-header-bar-icon">
					<Icon @click.native="collapsedSider" :class="rotateIcon" :style="{color:'#fefefe',marginBottom:'5px',zIndex:10}" type="md-menu" size="24"></Icon>					
				</i-col>
				<i-col :xs="16" :sm="16" :md="16" :lg="16" class="ty-layout-header-bar-logo">
					<img src="../assets/logo1.png">
					<img src="../assets/logo.png" style="height: 70px;">
					<img src="../assets/logo2.png">
				</i-col>
				<i-col :xs="4" :sm="4" :md="4" :lg="4">
					<Row>
						<i-col :xs="0" :sm="0" :md="0" :lg="6">
							<Icon type="ios-home-outline" color="#fefefe" size="30" :style="{marginTop:'50px'}" @click="handleHomePage"/>
						</i-col>
						<i-col :xs="0" :sm="0" :md="0" :lg="6">
							<Badge :count="badgeCount" :offset="[50,3]">
								<Icon type="ios-notifications-outline" color="#fefefe" size="30" :style="{marginTop:'50px'}" @click="handleMessage"/>
							</Badge>
						</i-col>
						<i-col :xs="0" :sm="0" :md="0" :lg="6"><FullScreen v-model="isFullscreen" style="margin-top: 35px;"/></i-col>
						<i-col :xs="24" :sm="24" :md="24" :lg="6">
							<Dropdown @on-click="handleClick">
								<Avatar src="https://leyonggang.ltd/doc/tangyin/images/avatar2.png" shape="circle" :style="{marginTop:'35px',color:'#fff'}" size="large"/>
							<template #list>
								<DropdownMenu>
									<DropdownItem>个人信息</DropdownItem>
									<DropdownItem>修改密码</DropdownItem>
									<DropdownItem divided name="logout">退出登录</DropdownItem>
								</DropdownMenu>
							</template>
							</Dropdown>
						</i-col>
					</Row>
				</i-col>
			</Row>
		</Header> 
		<Layout>
			<Sider class="ty-main-slider" hide-trigger ref="side1" width="200" collapsible :collapsed-width="100" v-model="isCollapsed">
				<Menu ref="side_menu" theme="dark" width="200"  :open-names="openNavNames" :active-name="$route.name"
				@on-select="handleMenuItemSelect">
	                <Submenu v-for="(n) in navFirst" :key="n.id" :name="n.id" :class="{'side-hide':isCollapsed}">
	                	<template #title>
	                        <Icon :type="n.icon" size="24"/><span>{{n.text}}</span>
	                    </template>
	                    <MenuItem v-for="(sn) in navSecond(n.text)" :key="sn.id" :name="sn.id">
	                    <Icon :type="sn.icon" size="24"/><span>{{sn.text}}</span>
	                    </MenuItem>
	                </Submenu>
	            </Menu>
			</Sider>
			<Layout>
				<Header class="ty-layout-header-breadcrumb"><NavBreadcrumb/></Header>
				<Content class="ty-main-content">
					<div style="background: #fff;height: 100%"><router-view/></div>
				</Content> 
			</Layout>
		</Layout> 
	</Layout>
</template>
<script>
import FullScreen from '@/components/FullScreen'
import NavBreadcrumb from '@/components/NavBreadcrumb'
import {getTreeList} from '@/libs/tools.js'
export default {
	data () {
		return {
			isCollapsed: false,
			isFullscreen:false,
			badgeCount:3,
			openNavNames:[],
			menuList:[]
		}
	},
	components: {
	   FullScreen,
	   NavBreadcrumb
	},
	computed: {
		rotateIcon () {
			return [
				'menu-icon',
				this.isCollapsed ? 'rotate-icon' : ''
			]
		},
		menuitemClasses () {
			return [
				'menu-item',
				this.isCollapsed ? 'collapsed-menu' : ''
			]
		},
		navFirst(){
			return this.$store.getters.navFirst
		},
		navSecond(){
			return (t)=>{return this.$store.getters.navSecond(t)}
		}
	},
	methods: {
		collapsedSider () {
			this.$refs.side1.toggleCollapse();
		},
		handleClick(name){
			if(name==='logout'){
				this.axios.get("logout.action").then(res=>{
					this.$router.push('/')
				})
			}
		},
		navListReady(){
			if(this.$store.state.nav.navList.length==0){
				setTimeout(this.navListReady, 1000)
			}else{
				this.openNavNames=this.$store.getters.navFirstNames
			}
		},
		handleMessage(){
			this.$Notice.info({
				title: '通知消息1',
				desc: '这里是测试通知消息1'
			})
			this.$Notice.success({
				title: '通知消息2',
				desc: '这里是测试通知消息2'
			})
			this.$Notice.warning({
				title: '通知消息3',
				desc: '这里是测试通知消息3'
			})
		},
		handleHomePage(){
			this.$store.commit('currentNav','HomeView')
			this.$router.push('/main/')
		},
		handleMenuItemSelect(name){
			this.$store.commit('currentNav',name)
			this.$router.push('/main/'+name)
		}
	},
	watch: {
		openNavNames() {
		  this.$nextTick(() => {
			this.$refs.side_menu.updateOpened();
			this.$refs.side_menu.updateActiveName();
		  })
		}
	},
	mounted () {
		//this.$store.commit('currentNav',this.$router.name)
		this.navListReady()
	},
	beforeCreate(){
		this.axios.get("getUserInfo.action").then(res=>{
			let homeview={ "id":"HomeView","text":"","icon":"","ptext":"","picon":""}
			if(res.data==='nLog'){
				this.$router.push('/')
			}else{
				let formatList=res.data.navList.map((item)=>{
					return {title:item.text,icon:item.icon,name:item.id,ptitle:item.ptext}
				})
				this.menuList=getTreeList(formatList,undefined,[])
				
				res.data.navList.push(homeview)
				this.$store.commit("navListInit",res.data.navList)
				this.$store.commit("setUserInfo",res.data.user)
			}
		 })
		
	}
}
</script>
<style scoped>
.ivu-col{
	height: 80px;
}
.side-hide span{
	display: none;
}
.menu-icon {
	transition: all .3s;
}
.rotate-icon {
	transform: rotate(-90deg);
}
</style>
